<template>
    <div class="accidentUpload">
        <div class="titleLocation">
            <div class="title">生产安全事故上报</div>
            <div class="close" @click="close"></div>
        </div>
        <div class="mainBox">
            <div class="leftBox">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="allEvents">
                        <div
                            :class="{
                                eventItem: true,
                                activeEvent: currentId === item.id,
                            }"
                            v-for="(item, index) of eventsList"
                            :key="index"
                            @click="check(item)"
                        >
                            <span class="eventItemSpan" :title="item.title">
                                <span class="orderNum">{{ index + 1 }}</span>
                                、{{ item.title }}
                            </span>
                            <span class="eventTime">
                                {{ item.updateTime.split(" ")[0].slice(5) }}
                            </span>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="已上报" name="uploadEvents">
                        <div
                            :class="{
                                eventItem: true,
                                activeEvent: currentUploadId === item.id,
                            }"
                            v-for="(item, index) of uploadEventsList"
                            :key="index"
                            @click="hasUploadedCheck(item)"
                        >
                            <span class="eventItemSpan" :title="item.title">
                                <span class="orderNum">{{ index + 1 }}</span>
                                、{{ item.title }}
                            </span>
                            <span class="eventTime">
                                {{ item.updateTime.split(" ")[0].slice(5) }}
                            </span>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="rightBox">
                <div class="rightUpLocation">
                    <div class="reportsCont">
                        <div class="header">
                            <h3>突发事件信息专报</h3>
                            <div class="time">
                                <span>
                                    {{ currentEvent.sendDeptTitle || null }}
                                </span>
                                <span>
                                    {{ currentEvent.createTime }}
                                </span>
                            </div>
                        </div>
                        <div class="section">
                            <h3>{{ currentEvent.title }}</h3>
                            <div
                                class="content"
                                v-html="currentEvent.description"
                            ></div>
                        </div>
                        <div class="footer">
                            <div class="receiver">
                                {{ `报送:${currentEvent.receiveReportDept}` }}
                            </div>
                            <div class="worker">
                                <span>
                                    {{ `编辑：${currentEvent.sendUserName}` }}
                                </span>
                                <span>{{ `联系电话：暂无` }}</span>
                                <span>
                                    {{ `签发：${currentEvent.signUserName}` }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rightDownLocation">
                    <div class="uploadSelect">
                        <div class="uploadTitle">生产安全事故上报</div>
                        <div class="uploadBox">
                            <div class="uploadItems">
                                <span>事故行业：</span>
                                <el-select
                                    class="eventSelect"
                                    v-model="eventIndustry"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="(item, index) in industryOption"
                                        :key="index"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </div>
                            <div class="uploadItems">
                                <span>事故损失：</span>
                                <el-input
                                    class="eventInput"
                                    v-model="eventLost"
                                ></el-input>
                                <span>万元</span>
                            </div>
                            <div class="uploadItems">
                                <span>事故等级：</span>
                                <el-select
                                    class="eventSelect"
                                    v-model="eventLevel"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="(item, index) in levelOption"
                                        :key="index"
                                        :label="item.value"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div
                            class="uploadLocation"
                            v-if="activeName === 'allEvents'"
                        >
                            <div class="showReportBtn" @click="upload()">
                                生产安全事故注入
                            </div>
                        </div>
                        <div class="uploadLocation" v-else>
                            <div
                                class="showReportBtn uploadBtn"
                                @click="upload()"
                            >
                                重新注入
                            </div>
                            <div
                                class="showReportBtn uploadBtn cancel"
                                @click="cancel()"
                            >
                                撤销
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "AccidentUpload",
    data() {
        return {
            eventLevel: "较大事故",
            eventLost: 0.0,
            eventIndustry: "建筑业",
            eventIndustryList: [],
            currentId: 0,
            currentUploadId: 0,
            currentEvent: {},
            industryOption: [],
            levelOption: [
                {
                    id: "1",
                    value: "特别重大事故",
                },
                {
                    id: "2",
                    value: "重大事故",
                },
                {
                    id: "3",
                    value: "较大事故",
                },
                {
                    id: "4",
                    value: "一般事故",
                },
                {
                    id: "5",
                    value: "其他",
                },
            ],
            activeName: "allEvents",
            uploadEventsList: [],
        };
    },
    props: ["eventsList"],
    watch: {
        eventsList(newValue, oldValue) {
            this.getUploadEventsList();
            return newValue;
        },
        currentEvent(oldValue, newValue) {
            if (JSON.stringify(oldValue) === "{}") {
                return this.eventsList[0];
            } else {
                return newValue;
            }
        },
    },
    mounted() {
        this.getUploadEventsList();
    },
    methods: {
        handleClick(tab, events) {
            this.currentEvent = {};
            this.currentId = 0;
            this.currentUploadId = 0;
        },
        getUploadEventsList() {
            this.uploadEventsList = this.eventsList.filter(event => {
                return event.isReportSafeProd === 1;
            });
        },
        check(item) {
            this.eventLevel = this.levelOption.filter(res => {
                return item.disasterLevel === res.id;
            })[0].value;
            this.currentId = item.id;
            this.getEventIndustry(item.disasterType);
            if (item.isReportSafeProd === 1) {
                this.$confirm(
                    "本次事件已上报为生产安全事故中，是否重新上报？",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                        customClass: "confirmStyle",
                    }
                )
                    .then(() => {
                        this.currentEvent = item;
                        this.reportsShow = true;
                    })
                    .catch(() => {
                        this.currentEvent = {};
                        // this.currentEvent = {
                        //     sendDeptTitle: "",
                        //     createTime: "",
                        //     description: "",
                        //     title: "",
                        //     receiveReportDept: "",
                        //     sendUserName: "",
                        //     signUserName: "",
                        // };
                        this.$message({
                            type: "info",
                            message: "已取消操作",
                        });
                    });
            } else {
                this.currentEvent = item;
            }
        },
        hasUploadedCheck(item) {
            this.currentUploadId = item.id;
            this.currentEvent = item;
        },
        getNewEventsList(value) {
            this.eventsList = value;
        },
        async getEventIndustry(type) {
            let ref = await axios.get(
                `${sjzxUrl}/api/safeProductInput/disasterType?type=${type}`
            );
            if (ref.data.code === 200) {
                this.eventIndustry = ref.data.data[0];
                this.industryOption = ref.data.data;
            }
        },
        upload() {
            this.currentEvent.industry = this.eventIndustry || null;
            this.currentEvent.directPecuniaryLoss =
                parseFloat(this.eventLost) || null;
            this.currentEvent.level = this.eventLevel || null;
            if (this.currentEvent.hasOwnProperty("id")) {
                axios
                    .post(
                        `${sjzxUrl}/api/safeProductInput/input`,
                        this.currentEvent
                    )
                    .then(res => {
                        if (res.data.code === 200) {
                            this.currentEvent.isReportSafeProd = 1;
                            this.$message({
                                message: "生产安全事故注入成功！！！",
                                type: "success",
                            });
                            this.getUploadEventsList();
                        } else {
                            this.$message({
                                message: "生产安全事故注入失败！！！",
                                type: "warning",
                            });
                        }
                        console.log(res.data);
                    });
            } else {
                this.$message("请选择突发事件！！！");
            }
        },
        cancel() {
            if (this.currentEvent.hasOwnProperty("id")) {
                axios
                    .post(
                        `${sjzxUrl}/api/safeProductInput/backout?id=${this.currentEvent.id}`
                    )
                    .then(res => {
                        if (res.data.code === 200) {
                            this.currentEvent.isReportSafeProd = -1;
                            this.$message({
                                message: "生产安全事故撤销成功！！！",
                                type: "success",
                            });
                            this.getUploadEventsList();
                        } else {
                            this.$message({
                                message: "生产安全事故撤销失败！！！",
                                type: "warning",
                            });
                        }
                        console.log(res.data);
                    });
            } else {
                this.$message("请选择突发事件！！！");
            }
        },
        close() {
            this.$emit("close", false);
        },
    },
};
</script>
<style lang="stylus">
.confirmStyle{
    p{
        color:#000;
    }
    span{
        color:#000;
    }
}
</style>
<style lang="stylus">
@import '../../../../../assets/varibles.styl';
.leftBox {
    .el-tabs__header {
        width: 100%;
        z-index: 0;
        .el-tabs__nav-wrap {
            height: vh(50);
            line-height: vh(50);
            // min-width: vw1(2000);
            background: rgba(4, 34, 45, 0.37);

            .el-tabs__nav-prev, .el-tabs__nav-next {
                line-height: vh(30);
                color: #fff;
                font-size: vw(16);

            }
            .el-tabs__nav.is-top {
                width: 100%;
            }
            .el-tabs__item {
                height: vh(30);
                width: 50%;
                line-height: vh(30);
                font-size: vw(16);
                text-align: center;
                padding: 0px 5px 0px 5px;
                color: rgba(184, 185, 187, 1);
            }

            .el-tabs__item.is-active {
                color: #03DEE9;
            }

            .el-tabs__active-bar {
                // width: vw(10);
                background-color: #26cffe;
            }

            &::after {
                visibility: hidden;
                // background-color: none;
            }
        }
    }
    .el-tabs__content {
        z-index: 19;
        position: relative;
        width: 100%;
        height: 100%;
    }
}
</style>
<style lang="stylus">
.accidentUpload {
    position: absolute;
    right: 95%;
    top: 5vh;
    width: calc(65vw - 100px);
    // width: 1150px;
    height: 80vh;
    // margin:auto;
    z-index:30;
    background: rgba(255, 255, 255, 0.5);
    padding: 6px;
    .titleLocation {
        width: 100%;
        height: 40px;
        border-radius: 100;
        background:radial-gradient(at 30% 100%,#1E345D,#2E5486);
        text-align:center;
        line-height: 40px;
        .title {
            font-size: 24px;
            float center
        }
        .close {
            background: red;
            /* border: 1px solid black; */
            color: red;
            /* make a round button */
            border-radius: 12px;
            /* center text */
            line-height: 20px;
            text-align: center;

            font-size: 16px;
            font-weight:1;

            height: 20px;
            width: 20px;

            content: "\2716";
            top: -10px;
            right: -10px;
            position: absolute;
            /* display: none; */
        }
        .close::before {
            content: "\2014";
            color: white;
        }
    }

    .mainBox {
        width: 100%;
        height: calc(100% - 40px);
        display flex;
        margin: 0 auto;
        justify-content: space-between; /* 横向中间自动空间 */
        flex-wrap: wrap; /* 换行 */
        .leftBox {
            flex:0 0 auto;
            width:300px;
            height: 100%;
            border-radius: 100;
            border:1px dashed #03DEE9;
            background:radial-gradient(at 80% 80%,#1E345D,#2E5486);
            color: #000;
            overflow: auto;
            overflow-y: scroll;

            .eventItem {
                margin: 0px 10px 10px 10px;
                text-align: left;
                overflow-y: scroll;
                color: #000;
                overflow: hidden; // 高度塌陷
                cursor: pointer;
                line-height: 25px;
                font-size: 14px;
                border-bottom: 1px dashed #03DEE9;
                .eventItemSpan {
                    .orderNum {
                        display: inline-block;
                        min-width: 20px;
                        height: 20px;
                        line-height: 20px;
                        background: #1296DB;
                        text-align: center;
                    }
                }

            span.eventTime {
                float: right;
                line-height: 20px;
            }
        }

        .activeEvent span, .eventItem:hover span{
            color: #03dee9;
            // background:red
        }
        }
        .rightBox {
            flex:1 1 auto;
            background-color:red;
            display: flex;
            flex-flow: column;
            width: calc(100% - 300px);
            height: 100%;
            .rightUpLocation {
                flex:2 2 auto;
                border-radius: 100;
                border:1px dashed #03DEE9;
                background:radial-gradient(at 70% 70%,#fff,#2E5486);
                width: 100%;
                height: calc(100% - 200px)
                .reportsCont{
                    width:100%;
                    height: 100%;
                    padding:20px;
                    color:#515a6e;
                    overflow-y: scroll;
                    .header{
                        h3{
                            font-size: 36px;
                            font-weight: 900;
                            color:red;
                            margin:.3rem 0;
                            text-align: center;
                            font-family: SimSun;
                        }
                        .time{
                            display: flex;
                            justify-content: space-between;
                            border-bottom:2px solid red;
                            padding-bottom:6px;
                            font-family: FangSong;
                            font-size: 20px;
                            span{
                                color:#000;
                            }
                        }
                    }
                    .section{
                        // min-height:3rem;
                        padding:0 50px 10px;
                        padding-bottom:200px;
                        text-align: left;

                        h3{
                            text-align: center;
                            font-size: 30px;
                            font-weight: 900;
                            font-family:FangSong;
                            margin: 30px 0 25px;
                            color:#000;
                        }
                        .content{
                            line-height:30px;
                            p{
                                color:#000;
                            }
                        }
                    }
                    .footer{
                        font-size: 20px;
                        font-family: FangSong;
                        text-align: left;
                        .receiver{
                            border-bottom:2px solid red;
                            padding-bottom:6px;
                            color:#000;
                        }
                        .worker{
                            display: flex;
                            justify-content: space-between;
                            margin-top:6px;
                            span{
                                color:#000;
                            }
                        }
                    }
                }
            }
            .rightDownLocation {
                flex: 1 1 auto;
                border-radius: 100;
                background:radial-gradient(at 50% 50%,#1E345D,#2E5486);
                width: 100%;
                height: 200px;
                border:1px dashed #03DEE9;
                .uploadSelect{
                    width: 100%;
                    height: 100%;
                    padding: 10px
                    .uploadTitle{
                        width: 100%;
                        height: 20px;
                        // background: green;
                        text-align:center;
                        line-height: 20px;
                        font-size: 20px;
                        float center
                    }
                    .uploadBox{
                        .uploadItems{
                            display:inline-block;
                            margin:0 10px;
                            width: 45%;
                            height: 50px;
                            line-height: 50px;
                            span{
                                color: #FF0000;
                            }
                            .eventSelect {
                                width 60%
                                .el-select-dropdown__item {
                                    text-align: center;
                                    span {
                                        color: #000;
                                    }
                                }
                            }
                            .eventInput{
                                width: 40%;
                                .el-input{
                                    width: 60%
                                }
                            }


                        }
                    }
                }
                .uploadLocation{
                    display flex
                    .showReportBtn {
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        cursor: pointer;
                        border:1px solid #40BBF1;
                        margin-top: 20px;
                        &.uploadBtn{
                            width: 50%;
                            margin: 20px 5px 0 0;
                            &:hover{
                                background: #40BBF1;
                            }
                            &.cancel:hover{
                                background: #e44949;
                                border: #40BBF1;
                            }
                        }
                        &:hover{
                            background: #40BBF1;
                        }
                    }
                }
            }
        }
    }

}
</style>
